@import "../../assets/style/common.less";
.pages-user-portrait {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url("../../assets/image/user_portrait/user-portrait.png") no-repeat;
  background-size: 100% 100%;
  
  &--title {
    position: absolute;
    left: 870px;
    top: 15px;
    color: white;
    font-size: 36px;
  }

  &--top {
    .page-top;
  }

  &--ltop {
    position: absolute;
    left: 45px;
    top: 100px;
    width: 500px;
    height: 380px;
  }

  &--rtop {
    position: absolute;
    right: 10px;
    top: 110px;
    width: 490px;
    height: 300px;
    .display-flex();

    &--shang {
      position: relative;
      left: 2px;
      animation: shang-animation 10s ease-in-out infinite;
    }

    .lt, .rt, .lb, .rb {
      position: absolute;
      text-align: center;
      font-size: 26px;
      color: #eaf9ff;
      font-family: 'sans-serif';
      // &:hover {
      //   color: rgb(233, 153, 6);
      //   span:nth-child(1) {
      //     color: rgb(0, 233, 255)
      //   }
      // }
      span:nth-child(1) {
        color: rgb(0, 233, 255)
      }
    }
    .lt {
      left: 50px;
      top: 50px;
    }
    .rt {
      top: 50px;
      right: 80px;
    }
    .lb {
      left: 30px;
      bottom: 50px;
    }
    .rb {
      bottom: 50px;
      right: 25px;
    }
  }

  &--lbottom {
    position: absolute;
    left: 150px;
    bottom: 190px;
    width: 280px;
    height: 70px;
    .display-flex();
    div {
      width: 50%;
      font-size: 26px;
      color: #eaf9ff;
      text-align: center;
    }
  }

  &--rbottom {
    position: absolute;
    right: 90px;
    bottom: 122px;
    width: 334px;
    height: 337px;

    &--rotate {
      position: absolute;
      top: 0;
      left: 6px;
      width: 326px;
      height: 326px;
      z-index: 10;
    }

    &--btn {
      width: 100%;
      height: 100px;
      position: absolute;
      bottom: 10px;
      left: 0;
      cursor: pointer;
      z-index: 200;
    }
  }
}

@keyframes shang-animation {
  0% {
    top: 0;
  }
  20% {
    top: -10px;
  }
  40% {
    top: 0;
  }
  70% {
    top: -22px;
  }
  100% {
    top: 0;
  }
}